<template>
  <div class="searchPage">
    <div class="top-bar">
      <div class="search fl">
        <input ref="searchInput" @focus="init()" @keypress.13='enterSearch' v-model='keyword'
               class="text-md text-normal" type="text" name="" placeholder="输入你想要的公司信息"/>
      </div>
      <!-- <div class="fr search-btn text-md text-normal text-gray" @click="enterSearch()">搜索</div> -->
      <div class="fr search-btn" @click="GoToJobPage()">取消</div>
    </div>
    <div v-show='showTags' class="hot">
      <div>热门企业</div>
      <div class="hotContent">
        <span v-for="item in popCompany" class="hotEnterprise"
              @click.stop="search(item.id,0)">{{item.companyName}}</span>
      </div>
    </div>
    <div v-show='showHotTags' class="hot">
      <div>热门标签</div>
      <div class="hotContent">
        <span v-for="item in hotTags" class="hotEnterprise" @click.stop="search(item,1)">{{item}}</span>
      </div>
    </div>
    <div class="jobs" v-show='showRes'>
      <p class="resultTitle">为您查找到{{resultCount}}条数据</p>
      <jobListsVue ref='jobList' :jobLists="searchResults"></jobListsVue>
      <bottomMenu></bottomMenu>
    </div>
    <nothing v-show='noDataShow' ref='jobList' :jobLists="searchResults"></nothing>
  </div>
</template>

<script>
  import jobListsVue from './jobLists.vue'
  import nothing from './nothing.vue'
  import {getPositons} from '@/controller'
  import {eventBus} from '@/common/eventBus'
  import Nothing from "./nothing";
  import bottomMenu from './bottomMenu.vue'
  import {getHotCompany} from '@/controller'
  import {getHotTag} from '@/controller'

  export default {
    name: 'search',
    data() {
      return {
        msg: 'search',
        popCompany: [],
        hotTags: [],
        keyword: '',
        showRes: false,
        location: '南京',
        searchResults: [],
        resultCount: 0,
        noDataShow: false,
        showTags: true,
        showHotTags: true
      }
    },
    mounted() {
      eventBus.$on('changeCity', (val) => {
        this.location = val;
      });
      this.$refs.searchInput.focus();
      //请求热门企业列表
      getHotCompany().then((res) => {
        // if(res.code === 0){
        if (res.data.length != 0) {
          this.popCompany = res.data
        }
      });
      //请求热门标签列表
      this.hotTags = ['工资高', '包食宿', '活轻松', '交通方便']
      // getHotTag().then((res) => {
      //   if (res.data.length != 0) {
      //     console.log(res.data.length);
      //     for (let i = 0; i < res.data.length; i++) {
      //       this.hotTags.push(res.data[i].companyName)
      //     }
      //   }
      // });
    },
    methods: {
      GoToJobPage() {
        this.$router.push({
          path: `/`,
        })
      },
      init() {
        this.noDataShow = false;
        this.showRes = false;
        this.showTags = true;
        this.showHotTags = true;
      },
      enterSearch(event) {
        // event.preventDefault();
        this.search(this.keyword, 2)
      },
      /**
       * @param type int
       * @description 搜索
       */
      search(keyWords, type) { // 0:companyId 1:positionTag 2:positionTitle
        this.showTags = false;
        this.showHotTags = false;
        let params
        if (type === 0) {
          params = {
            companyId: keyWords,
            index: 0,
            count: 10,
          }
        } else if (type === 1) {
          params = {
            positionTag: keyWords,
            index: 0,
            count: 10,
          }
        } else if (type === 2) {
          params = {
            positionTitle: keyWords,
            index: 0,
            count: 10,
          }
        }
        getPositons(params).then((data) => {
          this.showRes = true;
          this.searchResults = data.data;
          this.resultCount = this.searchResults.length;
          if (this.resultCount === 0) {
            this.noDataShow = true;
            this.showRes = false;
          } else {
            this.noDataShow = false;
          }
        })
      }
    },
    components: {
      'jobListsVue': jobListsVue,
      'nothing': Nothing,
      'bottomMenu': bottomMenu
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top-bar .search {
    width: calc(100% - 45px);
  }

  .searchPage .jobs {
    padding: 4%;
  }
</style>
